<script setup>
import { ref, reactive, computed } from "vue";
import { TreeListAPI } from "@/api/mold/edger";

import {
  GetSelectAllDropdownAPI,
  GetCkAPI,
  GetDeptPI,
} from "@/api/common/index";

/**
 * 不常用类型：[物项属性,物项类别,使用单位,树结构下拉]
 */

// 车间选择数据
const treeData = ref([]);

// 物料类型
const selectAllDropdown = ref([]);

// 仓库
const selectAllCk = ref([]);

// 层级下拉
const treeSelsct = ref([]);

// 物项属性所需id
const uziCategoryId = ref("");
const props = defineProps({
  selectForm: {
    type: Array,
    default: () => [],
  },
  isShow: {
    type: Boolean,
    default: false,
  },
  //是否展开
  zhankai: {
    type: Boolean,
    default: false,
  },
  from: {
    type: Array,
    default: () => {},
  },
});
/**
 * 树结构
 */
const dataTree = ref([]);
const emit = defineEmits([
  "selectSubmit",
  "timeChange",
  "reset",
  "selectChange",
  "inspectChange",
]);
// 展开缩放
// const zhankai = ref(false)

/**
 * 选择时间类型
 */
const timeType = ref("月");
// 表单数据绑定
const Form = reactive({
  bilds: "",
  Time: "",

  beginTime: "",
  endTime: "",
});

// 获取部门
const getDept = async () => {
  try {
    console.log(props.selectForm);
    let s = props.selectForm.map((t) => t.type).filter((i) => i == "部门");
    console.log(s, "s");
    if (s.length == 0) return;
    const res = await GetDeptPI();
    deptData.value = res.data;
  } catch {
  } finally {
  }
};
getDept();

/**
 * 开始年份
 */
const startTime = ref();
/**
 * 结束年份
 */
const endTime = ref();

const Time = ref("");

const Timerange = ref("");
// 下拉选择时
const selectChange = (val) => {
  if (val.isGo) emit("selectChange", Form[val.model]);
};
const inspectChange = (val) => {
  emit("inspectChange", Form[val.model]);
};
// 时间范围选择时
const timeChange = (val) => {
  if (!val) {
    Form.beginTime = "";
    Form.endTime = "";
    return;
  } else {
    Form.beginTime = `${Time.value[0]} 00:00:00`;
    Form.endTime = `${Time.value[1]} 23:59:59`;
  }

  emit("timeChange", Time);
};

const timerangeChange = (val) => {
  console.log(val, "--");
  if (!val) {
    Form.beginTime = "";
    Form.endTime = "";
    return;
  } else {
    Form.beginTime = val[0];
    Form.endTime = val[1];
  }
};
// 提交查询
const submit = () => {
  emit("selectSubmit", Form, "submit");
};
/**
 *部门
 */
const deptData = ref([]);
// 重置查询条件
const reset = () => {
  for (let Key in Form) {
    Form[Key] = "";
  }
  Time.value = "";
  emit("selectSubmit", Form, "reset");
};

//
const nodeClick = (model) => {
  Form[model] = Form.bilds[Form.bilds.length - 1];
};

// 获取层级下拉
// const getTreeSelsct = async () => {
//   try {
//     const res = await GetMenuPermAPI()
//     treeSelsct.value = res.data
//   } catch {
//   } finally {
//   }
// }
// getTreeSelsct()
// 获取树结构
// const getTree = async () => {
//   try {
//     const res = await GetTreeAPI()
//     treeData.value = res.theDrop
//   } catch {
//   } finally {
//   }
// }
// getTree()

// watch(
//   () => props.selectForm,
//   (val) => {
//     if (val.length > 4) zhankai.value = true
//   },
//   {
//     deep: true,
//     immediate: true,
//   }
// )
/**
 * 类别下拉树结构
 */
const getTreeList = async () => {
  const is = props.selectForm.some((t) => t.type == "刀具类型");
  console.log(is);

  if (!is) return;
  try {
    const { data: res } = await TreeListAPI();
    dataTree.value = res;
  } catch (err) {
    console.log(err);
  }
};
getTreeList();
// 获取所有物料类型
const getSelectAllDropdown = async () => {
  const is = arrList.value.every((t) => t.type == "物料类型");
  if (is) return;
  const { data: result } = await GetSelectAllDropdownAPI();
  selectAllDropdown.value = result;
};

// 获取所有仓库
const getCk = async () => {
  const is = arrList.value.every((t) => t.type == "仓库");
  if (is) return;
  const { data: result } = await GetCkAPI();
  selectAllCk.value = result;
};

const arrList = computed(() => {
  if (Array.isArray(props.selectForm) && props.selectForm?.length > 0) {
    return props.selectForm;
  } else {
    console.error(new Error("模糊查询枚举数据错误！"));
    return [];
  }
});

// 物项属性改变时
const uziStatsChange = (val) => {
  uziCategoryId.value = val.materialAttributesId;
};

// getSelectAllDropdown()
// getCk()
defineExpose({ Form });
</script>

<template>
  <div class="boxM" :class="props.zhankai || props.isShow ? 'boxM_av' : 'boxM'">
    <div class="Box">
      <el-form :inline="true" label-width="120px">
        <el-form-item
          :label="item.type != '复选框' ? item.label || '时间选择' : ''"
          v-for="(item, index) in arrList"
          :key="index"
        >
          <!-- 输入 -->
          <el-input
            clearable
            @keyup.enter="submit"
            v-model.trim="Form[item.model]"
            v-if="item.type === '输入框'"
            :placeholder="`请输入${item.label || ''}`"
          />
          <!-- 层级下拉 -->
          <el-cascader
            v-if="item.type === '层级下拉'"
            :placeholder="`请输入${item.label}`"
            @keyup.enter="submit"
            v-model="Form.bilds"
            :options="item.opt || treeSelsct"
            :node-key="item?.config?.key || 'menuId'"
            :props="
              item?.config || {
                value: 'value',
                label: 'label',
                children: 'children',
              }
            "
            @change="nodeClick(item.model)"
          />
          <p-user-select
            v-model="Form[item.model]"
            :isDefault="false"
            v-if="item.type === '人员' || item.type === '员工'"
          />
          <!-- 安装地点 -->

          <p-install-place
            v-model="Form[item.model]"
            v-if="item.type === '安装地点' || item.type === '设备位置'"
          ></p-install-place>
          <!-- 树结构下拉 -->
          <el-tree-select
            clearable
            check-strictly
            v-if="item.type === '树结构下拉'"
            @keyup.enter="submit"
            v-model="Form[item.model]"
            :data="item.opt || treeData"
            :placeholder="`请选择${item.label}`"
            :node-key="item?.config?.key || 'id'"
            :props="item?.config || { value: 'code', label: 'name' }"
            :render-after-expand="false"
          />
          <!-- 树结构下拉 使用单位 -->

          <el-tree-select
            :disabled="props.disabled"
            v-model="Form[item.model]"
            v-if="item.type === '部门'"
            :data="deptData"
            node-key="id"
            value-key="id"
            :props="deptProp"
            :render-after-expand="false"
          />
          <p-dept-select
            v-model="Form[item.model]"
            v-if="item.type === '使用单位'"
          />
          <!-- 下拉 -->
          <el-select
            filterable
            @keyup.enter="submit"
            v-model="Form[item.model]"
            clearable
            :placeholder="`请选择${item.label}`"
            v-if="item.type === '下拉单选'"
            @change="selectChange(item)"
          >
            <el-option
              v-for="(item, index) in item.opt"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <!-- 稽查场景 -->
          <el-select
            filterable
            @keyup.enter="submit"
            v-model="Form[item.model]"
            clearable
            :placeholder="`请选择${item.label}`"
            v-if="item.type === '稽查场景'"
            @change="inspectChange(item)"
          >
            <el-option
              v-for="(item, index) in item.opt"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div v-if="item.type === '年份选择'" style="display: flex">
            <el-date-picker
              style="width: 150px !important"
              v-model="startTime"
              value-format="YYYY"
              type="year"
              :size="size"
            />
            <div style="margin: 0 10px">至</div>
            <el-date-picker
              style="width: 150px !important"
              v-model="endTime"
              type="year"
              value-format="YYYY"
              :size="size"
            />
          </div>
          <!-- 刀具类型 -->
          <el-tree-select
            v-if="item.type === '刀具类型'"
            v-model="Form[item.model]"
            :props="{
              children: 'children',
              label: 'categoryName',
              value: 'id',
            }"
            :data="dataTree"
            :render-after-expand="false"
            style="width: 240px"
          />
          <!-- 时间范围 -->
          <div class="pickerdate">
            <el-date-picker
              v-if="item.type === '日期范围'"
              v-model="Time"
              type="daterange"
              range-separator="-"
              start-placeholder="开始"
              end-placeholder="结束"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="timeChange"
            />
          </div>
          <div class="pickerdate">
            <el-date-picker
              v-if="item.type === '派工时间'"
              v-model="Form.Time"
              type="daterange"
              range-separator="-"
              start-placeholder="开始"
              end-placeholder="结束"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </div>
          <div class="datetimerange">
            <el-date-picker
              v-if="item.type === '时间选择'"
              v-model="Timerange"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始"
              end-placeholder="结束"
              value-format="YYYY-MM-DD hh:mm:ss "
              @change="timerangeChange"
            />
          </div>
          <!-- 复选框 -->
          <el-checkbox
            v-if="item.type === '复选框'"
            true-label="1"
            false-label="2"
            v-model="Form[item.model]"
            :label="item.label"
          />
          <div v-if="item.type === '选择时间'">
            <el-radio-group v-model="timeType" size="large">
              <el-radio-button label="月" value="月" />
              <el-radio-button label="年" value="年" />
            </el-radio-group>
          </div>

          <div v-if="item.type === '日期选择'">
            <el-date-picker
              v-model="Form[item.model]"
              :type="timeType == '月' ? 'month' : 'year'"
              placeholder="日期选择"
            />
          </div>

          <div v-if="item.type === '年月选择'">
            <el-date-picker
              v-model="Form[item.model]"
              :type="item.timeType"
              :value-format="item.format"
              placeholder="日期选择"
            />
          </div>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div class="Button" v-show="!props.isShow">
        <el-button type="primary" @click="submit">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <!-- 展开 -->
        <div
          style="display: inline; margin-left: 10px"
          class="zhankai"
          @click="zhankai = !zhankai"
        >
          <el-tooltip
            class="box-item"
            effect="dark"
            content="展开/缩放"
            placement="top-start"
          >
            <el-icon :class="zhankai ? 'icons_av' : 'icons'"
              ><ArrowDownBold
            /></el-icon>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pickerdate ::v-deep .el-date-editor {
  width: 260px !important;
}
.pickerdate ::v-deep .el-tooltip__trigger {
  width: 220px !important;
}

.pickerdate {
  width: 250px;
}

.Box {
  padding: 0 20px;
  // margin: 20px 0;
  // margin-top: 20px;
  display: flex;
  // justify-content: center;
}
.Button {
  min-width: 160px;
}

.boxM {
  transition: all 0.5s;
  height: 50px;
  overflow: hidden;
}

.boxM_av {
  transition: all 0.5s;
  height: 100%;
  overflow: hidden;
}
.icons_av {
  transition: all 0.5s;
  transform: rotate(180deg);
}
.icons {
  transition: all 0.5s;
  transform: rotate(0deg);
}

.zhankai {
  cursor: pointer;
}
</style>
